<template>
  <div>
    <h1 class="titleStyle"> 首页 </h1>
    <hr>
    <div class="filterStyle"> 
        <el-select class="chooseStyle" v-model="currentVersion" placeholder="选择版本" @change="versionChanged">
            <el-option v-for="item in versionList" :key="item" :label="item" :value="item"> </el-option>
        </el-select>
    </div>

    <div class="contentStyle">
        <el-button class="cardStyle" v-for="tag in versionList" :text="tag" :key="tag" @delete="onTagDelete"> </el-button>
        <!-- <el-button class="cardStyle"> </el-button> -->
    </div>
    

  </div>
</template>


<script>

import { getHomeInfo } from '@/api/homepageApi'

export default ({
    components: {},
    data() {
        return {
            // 所有数据源
            allList : [],
            // 版本列表
            versionList : [],
            // 作者
            authorList : [],
            // 
            currentVersion: '',
            currentAuthor: '',

        }
    },
    created() {
        
    },
    mounted() {
        this.getHomeInfoData()
    },
    methods: {
        // 获取数据
        getHomeInfoData(){
            getHomeInfo().then(response => {
                this.allList = response.data
                this.handleData()
                console.log(response)
            })
        },

        // 处理数据源
        handleData() {
            // 1.作者
            var tempList = [];
            for (let index = 0; index < this.allList.length; index++) {
                const item = this.allList[index];
                // tempList.push(item._CommitInfo__author)
            }
            var map = new Map();
            map.set('key', 'value');
            console.log(map)
            // var dict = {}
            // this.$set(this.dict, 'key', 'value')
            // Vue.set(dict, 'key', 'value')


            // 去重
            this.authorList = Array.from(new Set(tempList))

            // 2.版本
            this.versionList = ['v1020', 'v1019', 'v1018', 'v1017', 'v1016'];

            this.currentVersion = this.versionList[0]
            this.currentAuthor = this.authorList[0]
        },

        // 切换版本
        versionChanged(value) {
            this.currentVersion = value;
        },
        // 切换作者
        authorChanged(value) {
            this.currentAuthor = value;
        },

    },

})
</script>


<style lang="scss" scoped>

.titleStyle {
    text-align: center;
}

.filterStyle {
    margin-top: 20px;
    text-align: center;
}

.chooseStyle {
    margin-left: 5px;
    margin-right: 5px;
    width: 150px;
}

.contentStyle {
    margin-top: 30px;
    text-align: center;
}

.cardStyle {
    width: 45%;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
    background: red;
    height: 250px;
    border-radius: 12px;
}

.blankCardStyle {
    width: 46%;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    background: clear;
    height: 250px;
    border-radius: 12px;
}

</style>